/**
 * 一审打分详情
 */
import * as React from 'react'
import { Card, Form, Button, message, Table, Radio,Select,Row, Col } from 'antd'
import Authentication from '../../router/Authentication'
import { FormComponentProps } from 'antd/lib/form/Form'
import { PageHeaderLayout, DescriptionList, Description, Zmage } from '../../components'
import { post, SUBMIT_MARK } from '../../service/api'
import '../../assets/style/detail.less'
const RadioGroup = Radio.Group
const FormItem = Form.Item
const Option=Select.Option
export interface Props{
  record: any []
  sample: any
  sampleImgs: any
  scores: any []
  history: any
  layou:[]
}

@Authentication
class OneCheckDetail extends React.Component<Props & FormComponentProps, any> {

  state = {
    list: [],
    marks: []
  }

  componentWillReceiveProps (nextProps: Props & FormComponentProps) {
    const { record, scores } = nextProps
    const { sample: { sampleId } } = this.props
    const { list, marks } = this.state
    if(JSON.stringify(list) !== JSON.stringify(scores)){
      let scoreList = scores
      scoreList.map((row: any) => {
        Object.assign(row, { value: 0, sampleId: sampleId })
      })
      this.setState({
        ...this.state,
        list: scoreList
      })
    }
    if(JSON.stringify(marks) !== JSON.stringify(record)) {
      let scoreList = scores
      scoreList.map((row: any) => {
        record.map((k: any) => {
          if(row.scoreID == k.scoreID) {
            Object.assign(row, { value: k.value })
          }
        })
      })
      this.setState({
        ...this.state,
        marks: record,
        list: scoreList
      })
    }
  } 

  handleOp = (e: any) => {
    const { history } = this.props
    const { list } = this.state
    e.preventDefault();
    this.props.form.validateFields((err: any) => {if (!err) {
    post(SUBMIT_MARK, { ids: list }).then((res: any) => {
      if (res.code == '1') {
        message.success('操作成功！');
        history.goBack();
      }else {
        message.error(res.errMsg);
      }
    })
  }}
  )
  }
  handleChange = (id: string, e: any) => {
    const { list } = this.state
    const newList = list
    newList.map((row: any) => {
      if(row.Id == id) {
        row.value = e.target.value
        return
      }
    })
    this.setState({
      list: newList
    })
  }
  render () {
    const { sampleImgs, sample, history ,form,layou} = this.props
    const { getFieldDecorator } = form
    const { list } = this.state
    let totalScore = 0
    list.map((row: any) => {
      totalScore+=Number(row.value)
    })
    const getImgs = () => {
      let imgs = []
      if(sampleImgs) {
        if(sampleImgs.limg1) imgs.push(sampleImgs.limg1)
        if(sampleImgs.limg2) imgs.push(sampleImgs.limg2)
        if(sampleImgs.limg3) imgs.push(sampleImgs.limg3)
        if(sampleImgs.limg4) imgs.push(sampleImgs.limg4)
        if(sampleImgs.limg5) imgs.push(sampleImgs.limg5)
      }
      return imgs
    }
    const columns: any [] = [
      {
        title: '序号',
        dataIndex: 'scoreID',
        key: 'scoreID',
      },{
        title: '打分项',
        dataIndex: 'scoreName',
        key: 'scoreName',
      },{
        title: '分值',
        dataIndex: 'recqty',
        key: 'recqty',
        render: (text: any, record: any) => {
          return <RadioGroup onChange={(e: any) => this.handleChange(record.Id, e)} value={record.value}>
              <Radio value={record.value1}>{record.value1}分</Radio>
              <Radio value={record.value2}>{record.value2}分</Radio>
              <Radio value={record.value3}>{record.value3}分</Radio>
            </RadioGroup>
        }
      }
    ]
    return (
      <PageHeaderLayout 
        title = "">
        <Card bordered  title="基本资料">
          <DescriptionList size="large" title="样衣图片" style={{ marginBottom: 32 }}>
            <Description term="" style={{width: "100%"}}>
              {getImgs().map((img: string, index: number) => (
                <Zmage key={index} className="yy-img" src={img} />
              ))}
            </Description>
          </DescriptionList>
          <DescriptionList size="large" title="样衣信息" style={{ marginBottom: 32 }}>
            <Description term="样衣编码">{sample.sampleId}</Description>
            <Description term="波段号">{sample.bandname}</Description>
            <Description term="主荐款">{sample.ismain==1?"是":"否"}</Description>
            <Description term="大类">{sample.dlText}</Description>
            <Description term="小小类">{sample.xlText}</Description>
            <Description term="供应商货号">{sample.pcode}</Description>
            <Description term="合作方式">{sample.jyfs}</Description>
            <Description term="供应商编码">{sample.supplierid}</Description>
            <Description term="报价">{sample.cost}</Description>
            <Description term="供应商名称">{sample.vendername}</Description>
          </DescriptionList>
        </Card>
        <Card bordered style = {{marginTop: "20px"}} title="发货信息">
        
        <Form layout="inline" className="search-form"   onSubmit={this.handleOp}>
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
        <Col md={6} sm={28}>
                    <FormItem label="信心指数" >
                        {getFieldDecorator('layoutid', { rules: [{ required: true, message: '请选择信心指数' }], })(
              <Select style={{width:120}} placeholder="请选择状态" allowClear>
                {layou.map( (layou: any, index: number) => (<Option key={index} value={layou.dtvalue}>{layou.dtname}</Option>))}
              </Select>)}
                    </FormItem>
                    </Col>
                    </Row>
                    </Form>
          <Table 
            rowKey="Id"
            columns = {columns}
            dataSource = {list || []}
            pagination = {false}
          />
          <div style={{textAlign: 'center',marginTop:"20px"}}>
            总得分：{totalScore}分&nbsp;
            <Button type="primary" onClick={this.handleOp}>提交</Button>&nbsp;
            <Button onClick={() => {history.goBack()}}>返回</Button>
          </div>
        </Card>
      </PageHeaderLayout>
    )
  }
}
export default Form.create()(OneCheckDetail)
